<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 600px;
            height: 400px;
            border: 3px solid springgreen;
            margin: 50px auto;
            overflow: hidden;

            position: relative;
        }

        ul,
        li,
        ol {
            list-style: none;
        }

        .box ul {
            display: flex;

            position: absolute;
            top: 0;
            left: 0;
        }

        .box ul li {
            width: 600px;
            height: 400px;
        }

        .box ul li img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .box ol {
            position: absolute;
            bottom: 20px;
            left: 40px;
            display: flex;
        }

        .box ol li {
            width: 20px;
            height: 20px;
            background-color: gray;
            border-radius: 50%;
            margin-right: 10px;
        }

        .box ol li.active {
            background-color: red;
        }

        .left {
            width: 30px;
            height: 40px;
            background-color: rgb(60, 66, 71);
            position: absolute;
            top: calc(50% - 20px);
            left: 0;
            color: #fff;
            font-size: 30px;
            border-radius: 0 30px 30px 0;
            line-height: 40px;
            text-align: left;
            opacity: .5;
            display: none;
        }

        .right {
            width: 30px;
            height: 40px;
            background-color: rgb(60, 66, 71);
            position: absolute;
            top: calc(50% - 20px);
            right: 0;
            color: #fff;
            font-size: 30px;
            line-height: 40px;
            text-align: right;
            border-radius: 30px 0 0 30px;
            opacity: .5;
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li><img src="./images/01.jpg" alt=""></li>
            <li><img src="./images/02.jpg" alt=""></li>
            <li><img src="./images/03.jpg" alt=""></li>
            <li><img src="./images/04.jpg" alt=""></li>
            <li><img src="./images/05.jpg" alt=""></li>
        </ul>
        <ol>
            <!-- <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li> -->
        </ol>
        <div class="left">&gt;</div>
        <div class="right">&lt;</div>
    </div>
    <script src="./utils.js"></script>
    <script>
        /* 获取盒子 */
        const box = document.querySelector(".box")
        /* 获取左边的耳朵 */
        const left = document.querySelector(".left")
        /* 获取右边的耳朵 */
        const right = document.querySelector(".right")
        /* 获取图片的对应的盒子 */
        const imgBox = document.querySelector(".box ul")
        /* 获取图片对应的li的标签 */
        const imgBoxLi = document.querySelectorAll(".box ul li")
        /* 获取小圆点盒子 */
        const circleBox = document.querySelector(".box ol")
        /* 获取图片盒子中的宽度 */
        const imgBoxLiWidth = imgBoxLi[0].offsetWidth
        /* 每一张图片对应的下标 */
        let index = 1;
        /* 定时器的名字 */
        let timer = null;

        /* 输入的移入与移出
            实现:
                当鼠标移入 => 显示banner(轮播图)的两个耳朵,停止轮播图
                当鼠标移出 => 隐藏banner(轮播图)的两个耳朵,继续轮播
        */
        mouseMove();
        function mouseMove() {
            // mouseover与mouseout  => 支持冒泡
            // mouseenter与mouseleave => 支持捕获
            // 我们应该怎么选择? 他们的区别主要是事件的冒泡,如果是事件冒泡,那么mouseover,否则就随便选
            box.addEventListener("mouseenter", function () {
                //显示耳朵
                left.style.display = "block"
                right.style.display = "block"
                /* 停止定时器 */
                clearInterval(timer)
            })
            box.addEventListener("mouseleave", function () {
                left.style.display = "none"
                right.style.display = "none"
                /* 继续轮播 */
                autoPlay();
            })
        }

        /* 轮播图当中小圆点的个数是根据图片的个数来进行计算的,有一个张图片,就代表着有一个小圆点
            实现:
                1.获取总共有多少张图片对应的li,获取图片对应的li的个数
                2.遍历总个数,每遍历一次,创建li标签,将li的标签追加到小圆点(ol)的盒子里面
                3.在创建Li的标签的过程当中,li的下标为0的那个元素需要默认添加一个active样式
        */
        setCircle();
        function setCircle() {
            for (let i = 0; i < imgBoxLi.length; i++) {
                //每遍历一次,那么就需要创建一个lib标签 
                const li = document.createElement("li")

                /* 我们在创建li的时候,需要给每一个元素都添加一个样式 */
                li.classList.add("item")
                /* 在创建小圆点的时候,需要给Li绑定他的下标 */
                li.dataset.index = i;
                // 在创建Li的标签的过程当中,li的下标为0的那个元素需要默认添加一个active样式
                if (i === 0) {
                    li.classList.add("active")
                }

                //将li扔到小圆点的盒子里面去
                circleBox.appendChild(li)
            }
        }

        /* 在轮播之前我们就克隆元素
            实现
                1.将imgBox的第一个儿子克隆一份,将imgBox最后一个儿子克隆一份
                2.将克隆的第一个追加到imgBox最后
                3.将克隆最后一个元素插入图片的最前面
                4.默认显示的是第一张图片(没有插入之前的那个第一张图)
        */
        cloneElement();
        function cloneElement() {
            // 1.将imgBox的第一个儿子克隆一份,将imgBox最后一个儿子克隆一份
            let firstSon = imgBox.firstElementChild.cloneNode(true)
            let lastSon = imgBox.lastElementChild.cloneNode(true)
            // 2.将克隆的第一个追加到imgBox最后
            imgBox.appendChild(firstSon)
            // 3.将克隆最后一个元素插入图片的最前面
            imgBox.insertBefore(lastSon, imgBox.firstElementChild);
            // 4.默认显示的是第一张图片(没有插入之前的那个第一张图),显示一个li标签的长度
            imgBox.style.left = - imgBoxLiWidth + "px"
            /* 5.默认显示的第一张图片下标为1 */
            index = 1;
        }

        /* 自动轮播
            使用定时器,每过3秒imgBox移动imgBoxLiWidth宽度
            创建一个下标,这个下标的作用就是对应每一个图片索引,一旦轮播,index++=>表示的就是下一张图片
        */
        autoPlay()
        function autoPlay() {
            //使用定时器,每过3秒imgBox移动imgBoxLiWidth宽度
            timer = setInterval(() => {
                // index++的作用 => 表示的就是下一张图片
                index++
                /* 每过三秒移动一张图片 */
                // imgBox.style.left = - index * imgBoxLiWidth + "px"
                moveFn(imgBox, { left: - index * imgBoxLiWidth }, moveEnd)
            }, 1000);
        }

        /* 轮播结束
            切换一张图片之后,我们都要执行这个函数
                实现:
                    1. 轮播结束之后,我们需要判断这个图片是不是最后一张,如果是最后一张,那么下标修改成1
                        并且那么瞬间移动到下标为1的那个图片里面

                    2. 设置小圆点的显示
                        排他思想

        */
        function moveEnd() {
            console.log(index,imgBoxLi.length);
            // 轮播结束之后,我们需要判断这个图片是不是最后一张,如果是最后一张,那么下标修改成1
            if(imgBoxLi.length + 1 === index){
                index = 1;
                // 并且那么瞬间移动到下标为1的那个图片里面
                imgBox.style.left = - index * imgBoxLiWidth + 'px'
            }

            /* 轮播结束之后,我们需要判断这个图片是不是下标为0的那一张,如果是切换到最后一张 */
            if(index === 0){
                index = imgBoxLi.length
                // 并且那么瞬间移动到下标为1的那个图片里面
                imgBox.style.left = - index * imgBoxLiWidth + 'px'
            }

            //处理小圆点的显示
            // console.log(imgBoxLi.length); //就是小圆点的个数
            const lis = document.querySelectorAll(".box ol li")
            /* 使用排他思想 */
            for(let i = 0 ; i < lis.length ; i++){
                lis[i].classList.remove("active")
            }
            //给自己添加active
            lis[index - 1].classList.add("active")
        }
    
        /* 点击小圆点,左耳,右耳切换图片
            利用事件的委托(委派)来实现 => 点击事件应该要绑定在谁的身上 Box
                1. 我们知道点击的是那个儿子(左边,右边,小圆点)
        */
        clickChangeImg()
        function clickChangeImg(){
            box.onclick = function(e){
                //处理兼容性
                e = e || window.event
                console.log(e.target);
                //点击左耳
                if(e.target.className == "left"){
                    //如果是左边的儿子 index --
                    index --;
                    /* 移动到那张图片上面去 */
                    moveFn(imgBox, { left: - index * imgBoxLiWidth }, moveEnd)
                }
                /* 点击右耳 */
                if(e.target.className == "right"){
                    index ++ 
                    /* 移动到那张图片上面去 */
                    moveFn(imgBox, { left: - index * imgBoxLiWidth }, moveEnd)
                }
                /* 点击小圆点 */
                if(e.target.className.indexOf("item") !== -1){
                    //获取小圆点的下标
                    index = +e.target.dataset.index + 1
                    /* 移动到那张图片上面去 */
                    moveFn(imgBox, { left: - index * imgBoxLiWidth }, moveEnd)
                }
            }
        }
    </script>
</body>

</html>